<style lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;
    .ivu-card-body {
      padding: 0px;
    }
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .bench_search {
    margin-bottom: 10px;
  }
  .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }
  .item1{
    height: 42px;
    line-height: 40px;
  }
  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
  .opinion-details{
    line-height: 45px;
    margin-left: 70px;
  }
  .ml10{
    margin-left: 10px;
  }
</style>

<template>
  <Card class="card_style" :bordered="false" :dis-hover="true">
    <Row class="bench_search">
      <Col span="4">
        <span>区县：</span>
        <Select v-model="searchInfo.level1" transfer="" @on-change="getCommunityList(searchInfo.level1,1)" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[0]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Col span="4">
        <span>街道：</span>
        <Select v-model="searchInfo.level2" transfer="" @on-change="getCommunityList(searchInfo.level2,2)" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[1]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Col span="4">
        <span>社区：</span>
        <Select v-model="searchInfo.level3" transfer="" style="width: 70%;">
          <Option :value="item.id" v-for="item in mailList[2]" v-bind:key="item.id">{{item.title}}</Option>
        </Select>
      </Col>
      <Button class="new-btn-sty" @click="searchData()" style="margin-right:10px"><Icon type="ios-search" /> 搜索</Button>
      <Modal v-model="details" title="评分详情" width="500">
          <Form>
            <FormItem label="社区名称" prop="commounity" :label-width="80">
              <Input v-model="itemData.commounity" style="width:300px;" disabled></Input>
            </FormItem>
            <FormItem label="所属街道" prop="street" :label-width="80">
              <Input v-model="itemData.street" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="卫生评分" prop="score_sanitation" :label-width="80">
              <Input v-model="itemData.score_sanitation" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="服务评分" prop="score_serve" :label-width="80">
              <Input v-model="itemData.score_serve" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="评分人" prop="score_man" :label-width="80">
              <Input v-model="itemData.score_man" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="评分描述" prop="score_text" :label-width="80">
              <Input v-model="itemData.score_text" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="评分人电话" prop="score_man_phone" :label-width="80">
              <Input v-model="itemData.score_man_phone" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="创建时间" prop="create_time" :label-width="80">
              <Input v-model="itemData.create_time" style="width:300px" disabled></Input>
            </FormItem>
            <FormItem label="渠道" prop="type" :label-width="80">
              <Select v-model="itemData.type" style="width:300px" v-bind:disabled="true">
              <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </FormItem>
          </Form>
          <div slot="footer">
            <Button type="error" @click="details=false">关闭</Button>
          </div>
      </Modal>
    </Row>
    <Table border :columns="columns1" :data="tempDatalist">
      <template slot-scope="{ row, index }" slot="action">
        <Button type="primary" class="mr5" size="small"  @click="showInfo(row)">详情</Button>
      </template>
    </Table>
    <Row v-if="loadData == true">
      <Col class="demo-spin-col" span="8" offset="8">
        <Spin fix>
          <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
          <div>数据正在加载</div>
        </Spin>
      </Col>
    </Row>
    <Page :total="totalnum" :current="currentPageNo" :page-size="currentPageSize" @on-change="change" class="page_style"/>
  </Card>
</template>

<script>
import { findScoreList, getMailLevelList, getScoreInfo } from '@/api/eventlist'
export default {
  name: 'businessCheck',
  data () {
    return {
      typeList: [
        {
          value: 1,
          label: '短信'
        },
        {
          value: 2,
          label: '二维码'
        },
        {
          value: 3,
          label: '答题卡'
        },
        {
          value: 4,
          label: '电话'
        }
      ],
      id: '',
      loadData: false, // true加载
      company_code: this.$store.state.user.severUserInfo.company_code,
      params: { pageNo: 1, pageSize: 10 },
      currentPageSize: 10,
      currentPageNo: 1,
      searchInfo: { title: '', state: '' },
      totalnum: 0,
      columns1: [
        { title: '序号', type: 'index', width: 70, align: 'center' },
        { title: '所属区域', key: 'city', width: 150, align: 'center' },
        { title: '所属街道', key: 'street', width: 150, align: 'center' },
        { title: '社区名称', key: 'commounity', width: 150, align: 'center' },
        { title: '卫生评分', key: 'score_sanitation', width: 160, align: 'center' },
        { title: '服务评分', key: 'score_serve', width: 150, align: 'center' },
        { title: '评分人', key: 'score_man', width: 80, align: 'center' },
        { title: '评分描述', key: 'score_text', width: 200, align: 'center' },
        { title: '评分人电话', key: 'score_man_phone', width: 160, align: 'center' },
        // {
        //   title: '渠道',
        //   key: 'type',
        //   width: 100,
        //   align: 'center',
        //   render: (h, params) => {
        //     return h('span', this.getState(params.row.type))
        //   }
        // },
        { title: '创建时间', key: 'create_time', width: 150, align: 'center' },
        // { title: '创建人', key: 'create_by', width: 80, align: 'center' },
        {
          title: '操作',
          slot: 'action',
          align: 'center'
        }
      ],
      tempDatalist: [],
      mailList: [[], [], []],
      itemData: { commounity: '' },
      details: false
    }
  },
  methods: {
    // getState (type) {
    //   let state = ''
    //   switch (type) {
    //     case 1: state = '短信'
    //       break
    //     case 2: state = '二维码'
    //       break
    //     case 3: state = '答题卡'
    //       break
    //     case 4: state = '电话'
    //       break
    //   }
    //   console.log(state)
    // },
    // 查询订单列表接口
    init (params) {
      this.tempDatalist = []
      findScoreList(params).then(res => {
        if (res.data.errcode === 0) {
          this.tempDatalist = res.data.data.results
          this.totalnum = res.data.data.totalRecord
          this.loadData = false
        } else {
          this.loadData = true
          this.$Notice.error({ title: '获取业务抽查列表失败', desc: res.data.errmsg })
        }
      })
    },
    showInfo (item) {
      this.details = true
      this.id = item.id
      getScoreInfo(item).then(res => {
        if (res.data.errcode === 0) {
          this.itemData.commounity = res.data.data.commounity
          this.itemData.street = res.data.data.street
          this.itemData.city = res.data.data.city
          this.itemData.score_sanitation = res.data.data.score_sanitation
          this.itemData.score_serve = res.data.data.score_serve
          this.itemData.score_man = res.data.data.score_man
          this.itemData.score_text = res.data.data.score_text
          this.itemData.score_man_phone = res.data.data.score_man_phone
          this.itemData.create_time = res.data.data.create_time
          this.itemData.type = res.data.data.type
          console.log(this.itemData.type)
        } else {
          this.loadData = true
          this.$Notice.error({ title: '查询详情失败', desc: res.data.errmsg })
        }
      })
    },
    searchData () {
      let params = {
        pageNo: 1,
        pageSize: 10,
        company_code: this.company_code,
        city: this.searchInfo.level1,
        street: this.searchInfo.level2,
        commounity: this.searchInfo.level3
      }
      this.currentPageNo = 1
      this.init(params)
    },
    change (pageNo) {
      this.currentPageNo = pageNo
      let params = {
        pageNo: pageNo,
        pageSize: 10,
        company_code: this.company_code
      }
      this.init(params)
    },
    // 社区统计下拉搜索框的级联查询
    getCommunityList (id, index) {
      if (id === 0) {
        this.mailList[index] = []
        this.searchData()
        return
      }
      getMailLevelList({ id: id }).then(res => {
        if (res.data.errcode === 0) {
          this.mailList[index] = res.data.data
          this.mailList[index].unshift({ id: 0, title: '全部' })
          this.$forceUpdate()
        } else {
          this.$Notice.error({ title: '获取信息失败', desc: '查询区域列表信息失败' })
        }
      })
    }
  },
  mounted () {
    this.params.company_code = this.company_code
    this.init(this.params)
    this.getCommunityList(null, 0)
  }
}
</script>
